<template>
  <div>
    <!-- Feature Area Starts -->
    <section class="feature-area section-padding2">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>Why choose us</h2>
              <p>Open lesser winged midst wherein may morning</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4">
            <div class="single-feature mb-4 mb-lg-0">
              <h4>优良的学习氛围</h4>
              <p class="py-3">
                实验室始终充满着饱满的学习热情，无论何时你都能看到有学长学姐在努力学习
              </p>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="single-feature mb-4 mb-lg-0">
              <h4>突出的培养能力</h4>
              <p class="py-3">
                我们有众多优秀的学长学姐，他们积极参加比赛并取得了非常优秀的成绩
              </p>
              <div class="secondary-btn">
                <a @click="toResult()"
                  >explore now<span class="flaticon-next"></span
                ></a>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="single-feature">
              <h4>舒适的学习环境</h4>
              <p class="py-3">
                实验室配备齐全的空调、wife等设施，保证同学能以最好的状态进行学习
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Feature Area End -->

    <!-- Team Area Starts -->
    <section class="team-area section-padding2" ref="awards">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>往届成就</h2>
              <p>Previous achievements.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6 col-sm-6">
            <div class="single-team mb-5 mb-lg-0">
              <div class="team-img team-img4"></div>
              <div class="team-footer text-center mt-4">
                <h3></h3>
                <h5></h5>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-sm-6">
            <div class="single-team mb-5 mb-lg-0">
              <div class="team-img team-img5"></div>
              <div class="team-footer text-center mt-4">
                <h3></h3>
                <h5></h5>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-sm-6">
            <div class="single-team mb-5 mb-lg-0">
              <div class="team-img team-img1"></div>
              <div class="team-footer text-center mt-4">
                <h3>智科杯</h3>
                <h5>物联网+智能控制创新大赛二等奖</h5>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="single-team mb-5 mb-sm-0">
              <div class="team-img team-img3"></div>
              <div class="team-footer text-center mt-4">
                <h3>第一届邦普杯电子设计大赛</h3>
                <h5>一等奖</h5>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="single-team mb-5 mb-sm-0">
              <div class="team-img team-img6"></div>
              <div class="team-footer text-center mt-4">
                <h3>网络挑战总决赛</h3>
                <h5>三等奖</h5>
              </div>
            </div>
          </div>
          <div class="col-lg-12 col-sm-6">
            <div class="single-team mb-5 mb-lg-0">
              <div class="team-img team-img2"></div>
              <div class="team-footer text-center mt-4">
                <h3>全国大学生数学建模竞赛</h3>
                <h5>二等奖</h5>
              </div>
            </div>
          </div>

        </div>

      </div>
    </section>
    <!-- Team Area End -->

    <section class="team-area section-padding2">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 col-sm-12">
            <el-popover
              placement="top-start"
              title="智能安全驾驶检测系统"
              trigger="hover"
              content="整个项目运用到了C/C++、Java、Springboot、python、Html、CSS、JS、mysql、linux等语言及技术"
            >
              <h3 slot="reference" class="bookTitle">智能安全驾驶检测系统</h3>
            </el-popover>
            <div class="single-team mb-5 mb-sm-0">
              <div class="team-footer text-center mt-4">
                <video controls>
                  <source :src="imgBaseUrl + '/intelligent-safe_2.mp4'" />
                </video>
              </div>
            </div>
          </div>
        </div>
        <div class="team-footer text-center mt-4">
                <h3>第十三届中国大学生服务外包创新创业大赛</h3>
                <h5>中部区域三等奖</h5>
              </div>
      </div>
    </section>

    <!-- Employee Area Starts -->
    <section class="employee-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-top text-center">
              <h2>社团获奖</h2>
              <p>All awards</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 col-md-6">
            <div class="single-news mb-5 mb-lg-0">
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover"
                content="这是所有优秀的学长学姐通过自己的不懈努力获得的奖项，他们都是我们的优质榜样"
              >
                <h3 slot="reference" class="bookTitle">社团荣誉</h3>
              </el-popover>
              <div class="team-img team-img4"></div>
              <div class="news-tag">
                <ul class="my-4">
                  <li>
                    <h5><i class="fa fa-calendar-o"></i> 24th June, 2022</h5>
                  </li>
                  <li class="separator mx-2"><span></span></li>
                  <li>
                    <h5><i class="fa fa-folder-open-o"></i> 社团获奖</h5>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Employee Area End -->
  </div>
</template>

<script>
import {picBaseUrl} from '@/utils/const'

export default {
  data () {
    return {
      imgBaseUrl: picBaseUrl + '/news/img'
    }
  },
  methods: {
    toResult () {
      this.$refs['awards'].scrollIntoView(true)
    }
  }
}
</script>
<style>
  video{
     max-width: 100%;
     height: auto;
  }
</style>

